<template>
    <el-main>
        <!--   -->
        <el-form :model="params" ref="deptForm" :rules="rules" label-width="80px" :inline="false" size="normal">
            <el-form-item label="">
                <el-input v-model="params.searchName"></el-input>
            </el-form-item>
            <el-form-item>
                    <el-button icon="el-icon-search">查询</el-button>
                    <el-button icon="el-icon-close">重置</el-button>
            </el-form-item>
        </el-form>
        <!-- 打印表单 -->
        <el-table
        :data="tableList"
        row-key="id"
        default-expand-all
        :tree-props="{ children: 'children' }"
        border
        stripe
        >
            <el-table-column prop="name" label="部门名称"></el-table-column>
            <el-table-column prop="parentName" label="上级部门"></el-table-column>
            <el-table-column prop="deptCode" label="部门编码"></el-table-column>
            <el-table-column prop="deptPhone" label="部门电话"></el-table-column>
            <el-table-column prop="deptAddress" label="部门地址"></el-table-column>
            <el-table-column label="操作" align="center" width="250">
                <template slot-scope="scope">
                <el-button
                    
                    icon="el-icon-edit-outline"
                    type="primary"
                    size="small"
                    @click="editHandler(scope.row)"
                    >编辑</el-button
                >
                <el-button
                   
                    icon="el-icon-close"
                    type="danger"
                    size="small"
                    @click="deleteHandler(scope.row)"
                    >删除</el-button
                >
                </template>
            </el-table-column>
        </el-table>
        <!-- 新增部门弹框 -->
        <!-- 封装弹框组件 -->
        <el-dialog
            title="addDialog.title"
            :visible=addDialog.visible
            width="addDialog.width"
            >
            <el-form 
            :model="addDeptModel"
            ref="addDeptForm" 
            :rules="rules"
            label-width="80px" 
            :inline="true"
            size="small">
                <el-form-item prop="parentName" label="上级部门">
                    <el-input
                    v-model="addDeptModel.parentName"
                    ></el-input>
                </el-form-item>
                <el-form-item prop="name" label="部门名称">
                    <el-input v-model="addDeptModel.name"></el-input>
                </el-form-item>
                <el-form-item label="部门编码">
                    <el-input v-model="addDeptModel.deptCode"></el-input>
                </el-form-item>
                <el-form-item label="部门电话">
                    <el-input v-model="addDeptModel.deptPhone"></el-input>
                </el-form-item>
                <el-form-item label="部门经理">
                    <el-input v-model="addDeptModel.manager"></el-input>
                </el-form-item>
                <el-form-item label="部门地址">
                    <el-input v-model="addDeptModel.deptAddress"></el-input>
                </el-form-item>
                <el-form-item label="部门序号">
                    <el-input v-model="addDeptModel.orderNum"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer">
                <el-button @click="onClose()">Cancel</el-button>
                <el-button type="primary" @click="onConfirm()">OK</el-button>
            </span>
        </el-dialog>
        >

        
    </el-main>
</template>
<script>
import {getDeptListApi} from '@/api/department'
export default {
    data() {
        return {
            //存储部门列表数据
            tableList: [],
            //存储搜索关键字数据域
            params: {
                searchName: "",
            },
             //新增部门表单数据域
            addDeptModel: {
                editType: "",
                id: "",
                pid: "",
                parentName: "",
                manager: "",
                deptAddress: "",
                deptPhone: "",
                name: "",
                deptCode: "",
                orderNum: "",
            },
                  //存储新增对话框属性
            addDialog: {
                title: "",
                width: 620,
                height: 210,
                visible: false,
            },
        }
    },
    created(){
        this.getDeptList()
    },
    methods:{
        async getDeptList(){
            let res = await getDeptListApi(this.params)
            this.tableList = res.data
            const {children} = res.data[0]
            console.log(children)
        },
        editHandler(row){
            console.log(row)
        },
        deleteHandler(row){
            console.log(row)
        },
        onClose(){
            this.addDialog.visible = false;
        },
        onConfirm(){
            this.addDialog.visible = false;
        }
    }
}
</script>
<style lang="scss">

</style>